<template>
  <div class="container" ref="container">
    <div
        v-for="(item, index) in categories"
        :key="index"
        class="card"
        :style="cardStyle(index)"
        @mouseenter="activeIndex = index"
        @mouseleave="activeIndex = -1"
        @click="goToCategory(item.id)"
    >
      <div class="image-wrapper">
        <img :src="item.image" :alt="item.name" />
      </div>
      <div class="label">{{ item.name }}</div>
    </div>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import image1 from '../assets/1min.jpg'
import image2 from '../assets/2yin.jpg'
import image3 from '../assets/3wudao.jpg'
import image4 from '../assets/4xiju.jpg'
import image5 from '../assets/5quyi.jpg'
import image6 from '../assets/6zaji.jpg'
import image7 from '../assets/7meishu.jpg'
import image8 from '../assets/8jiyi.jpg'
import image9 from '../assets/9yiyap.jpg'
import image10 from '../assets/10minsu.jpg'

export default {
  setup() {
    const router = useRouter()
    const containerWidth = ref(0)
    const activeIndex = ref(-1)

    const categories = ref([
      { id: 'folk-literature', name: '民间文学', image: image1 },
      { id: 'traditional-music', name: '传统音乐', image: image2 },
      { id: 'traditional-dance', name: '传统舞蹈', image: image3 },
      { id: 'traditional-drama', name: '传统戏剧', image: image4 },
      { id: 'quyi', name: '曲艺', image: image5 },
      { id: 'traditional-sports', name: '传统体育', image: image6 },
      { id: 'recreation-acrobatics', name: '游艺与杂技', image: image7},
      { id: 'traditional-art', name: '传统美术', image: image8 },
      { id: 'traditional-craft', name: '传统技艺', image: image9 },
      { id: 'traditional-medicine', name: '传统医药', image: image10 },
      { id: 'folk-custom', name: '民俗', image: image1 }
    ]);

    // 跳转到分类项目页面
    const goToCategory = (categoryId) => {
      router.push({
        name: 'CategoryProjects',
        params: { categoryId }
      })
    }

    // 动态计算卡片参数
    const layoutParams = computed(() => {
      const cardCount = 10
      const visibleWidth = containerWidth.value * 0.1 // 每张可见部分
      const fullWidth = containerWidth.value * 0.25 // 卡片完全展开宽度
      return { visibleWidth, fullWidth }
    })

    // 卡片样式计算
    const cardStyle = computed(() => (index) => {
      const { visibleWidth, fullWidth } = layoutParams.value
      const isActive = activeIndex.value === index

      return {
        width: `${fullWidth}px`,
        left: `${visibleWidth * index}px`,
        zIndex: isActive ? 100 : 10 - index,
        transform: isActive ? 'scale(1.05)' : 'none',
        clipPath: isActive ? 'none' : `inset(0 ${fullWidth - visibleWidth}px 0 0)`
      }
    })

    // 容器尺寸监听
    onMounted(() => {
      const updateSize = () => {
        containerWidth.value = document.querySelector('.container').offsetWidth
      }
      updateSize()
      window.addEventListener('resize', updateSize)
    })

    return { categories, activeIndex, cardStyle ,goToCategory}
  }
}
</script>

<style scoped>
.container {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: #f5f3ef;
  overflow: hidden;
}

.card {
  position: absolute;
  height: 100vh;
  top: 0;
  transform: translateY(-50%);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 12px 24px rgba(0,0,0,0.15);
  cursor: pointer;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.image-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}

.card:hover img {
  transform: scale(1.08);
}
.label {
  position: absolute;
  left: 20px;
  bottom: 30px;
  color: white;
  font-size: 60px;
  font-weight: 600;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
  opacity: 0.9;
  transition: all 0.3s;
  writing-mode: vertical-lr; /* 竖向排列 */
  text-orientation: upright; /* 文字正立 */
  white-space: nowrap; /* 防止文字换行 */
}


.card:hover .label {
  opacity: 0;
  transform: translateY(20px);
}

/* 响应式调整 */
@media (max-width: 1600px) {
  .card {
    height:100%
  }

  .label {
    font-size: 20px;
  }
}

@media (max-width: 1024px) {
  .card {
    height: 50vh;
  }

  .label {
    font-size: 18px;
    left: 15px;
    bottom: 20px;
  }
}
</style>